<template>
    <div id="tags">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
            <el-breadcrumb-item>标签列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card style="min-height: 620px; position: relative">
            <!-- 用户列表区域 -->
            <el-table :data="tagList" border stripe>
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="tag.name" label="名称" width="350"></el-table-column>
                <el-table-column prop="tag.value" label="文章数"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-row type="flex" justify="space-around">
                            <el-col :span="5">
                                <el-tooltip content="编辑" placement="top" :enterable="false" :hide-after="500">
                                    <el-button type="primary" icon="el-icon-edit" size="mini"
                                               @click="showEditDialog(scope.row.tagId)"></el-button>
                                </el-tooltip>
                            </el-col>
                            <el-col :span="5">
                                <el-tooltip content="删除" placement="top" :enterable="false" :hide-after="500">
                                    <el-button type="danger" icon="el-icon-delete" size="mini"
                                               @click="removeTagById(scope.row.tagId)"></el-button>
                                </el-tooltip>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="position: absolute; bottom: 10px" class="tl-margin-top-20" type="flex" justify="space-between">
                <el-col :span="22">
                    <!-- 分页区域 -->
                    <el-pagination
                        :current-page.sync="queryInfo.pageNum"
                        @current-change="handleCurrentChange"
                        :page-size="queryInfo.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </el-col>
                <el-col :span="2">
                    <el-button size="small" type="success" @click="addDialogVisible = true">新增标签</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog width="30%" title="添加标签" @close="dialogClosed('addTagRef')" :visible.sync="addDialogVisible" :close-on-click-modal="false">
            <el-form @submit.native.prevent :rules="TagRules" ref="addTagRef" :model="addTagFrom" label-width="95px" label-suffix=":" status-icon>
                <el-form-item label="标签名称" prop="name">
                    <el-input v-model="addTagFrom.name" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="addDialogVisible = false">取消</el-button>
                <el-button size="medium" type="primary" @click="addTag('addTagRef')">添加标签</el-button>
            </span>
        </el-dialog>
        <el-dialog width="30%" title="编辑标签" @close="dialogClosed('editTagRef')" :visible.sync="editDialogVisible" :close-on-click-modal="false">
            <el-form @submit.native.prevent :rules="TagRules" ref="editTagRef" :model="editTagFrom" label-width="95px" label-suffix=":" status-icon>
                <el-form-item label="标签名称" prop="name">
                    <el-input v-model="editTagFrom.name" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="editDialogVisible = false">取消</el-button>
                <el-button size="medium" type="primary" @click="editTag('editTagRef')">更新标签</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Tags',
    components: {},
    data: function () {
        return {
            queryInfo: {
                pageNum: 1,
                pageSize: 10
            },
            total: 10,
            tagList: [],
            addDialogVisible: false,
            addTagFrom: {
                name: ''
            },
            editDialogVisible: false,
            editTagFrom: {
                id: 0,
                name: ''
            },
            TagRules: {
                name: [{
                    required: true, message: '请输入标签名称', trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        addTag: function (formName) {
            this.$refs[formName].validate(async (valid) => {
                if (!valid) {
                    return false;
                }
                const { data: res } = await this.$http.post('/tag', {
                    name: this.addTagFrom.name
                });
                if (res.code ^ 200) {
                    return this.$message({ showClose: true, message: res.msg, type: 'error' });
                }
                this.$message({ showClose: true, message: res.msg, type: 'success' });
                this.addDialogVisible = false;
                await this.getTagList();
            })
        },
        dialogClosed: function (formName) {
            this.$refs[formName].resetFields();
        },
        getTagList: async function () {
            const { data: res } = await this.$http.get(`/tags/${this.queryInfo.pageNum}`);
            console.log(res)
            if (res.code ^ 200) {
                return this.$message({ showClose: true, message: res.msg, type: 'error' });
            }
            if (!res.data.rows.length && (this.queryInfo.pageNum ^ 1)) {
                this.queryInfo.pageNum--;
                return await this.getTagList();
            }
            this.tagList = res.data.rows;
            this.total = res.data.total;
        },
        handleCurrentChange: function (val) {
            this.queryInfo.pageNum = val;
            this.getTagList();
            console.log(`当前页: ${val}`);
        },
        removeTagById: async function (id) {
            await this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data: res } = await this.$http.delete(`/tag/${id}`);
                if (res.code ^ 200) {
                    return this.$message({ showClose: true, message: res.msg, type: 'error' });
                }
                this.$message({ showClose: true, message: res.msg, type: 'success' });
                await this.getTagList();
            }).catch(() => {
                this.$message({ showClose: true, type: 'info', message: '已取消删除' });
            });
        },
        showEditDialog: async function (id) {
            this.editDialogVisible = true
            console.log(id)
            const { data: res } = await this.$http.get(`/tag/${id}`);
            if (res.code ^ 200) {
                this.$message({ showClose: true, message: res.msg, type: 'error' });
            } else {
                this.editTagFrom = res.data;
            }
        },
        editTag: function (formName) {
            this.$refs[formName].validate(async (valid) => {
                if (!valid) {
                    return false;
                }
                const { data: res } = await this.$http.put('/tag', this.editTagFrom);
                if (res.code ^ 200) {
                    return this.$message({ showClose: true, message: res.msg, type: 'error' });
                }
                this.$message({ showClose: true, message: res.msg, type: 'success' });
                this.editDialogVisible = false;
                await this.getTagList();
            });
        }
    },
    created: function () {
        this.getTagList()
    }
}
</script>

<style lang='less' scoped>
#tags ::v-deep .el-table td, ::v-deep .el-table th {
    padding: 10px 0;
}
</style>
